3. Bootstrap

W tym module odejdziemy na chwilę od pisania samodzielnie całego kodu od początku do końca. W pracy developera często zdarza się bowiem, że trzeba skorzystać z pewnych gotowych rozwiązań i dostosować je do własnych potrzeb.

Nauczysz się podpinać i wykorzystywać takie gotowe rozwiązania na przykładzie najpopularniejszego frameworka developerskiego – Bootstrapa. Każdy framework tego typu działa na bardzo podobnych zasadach, więc konieczność użycia innego nie powinna sprawić Ci po tym module problemu.

Co to jest framework programistyczny?

Framework to coś w rodzaju szkieletu lub środowiska do tworzenia strony internetowej, lub aplikacji. Poprzez swoje założenia narzuca stosującej go osobie pewien sposób budowania rozwiązań i stosowanie uznanych praktyk. Frameworki dla serwisów internetowych mają najczęściej postać iluś plików, które są "podłączane" do tworzonego projektu, aby móc wykorzystywać ich możliwości.

Programista prawie zawsze modyfikuje niektóre z rozwiązań frameworka, aby dostosować tworzony projekt pod specyficzne rozwiązania (np. wymagania klienta), których ten uniwersalny szkielet nie uwzględnia.

Popularne frameworki frontendowe

Początkowo frameworki CSS tworzono w domowym zaciszu, ale tematem zainteresowały się firmy, które zaczęły tworzyć takie zestawy gotowców dla swoich potrzeb. Następnie zaczęły one udostępniać takie rozwiązania za darmo w internecie.

Niekwestionowanym liderem wśród frameworków CSS jest od dawna Bootstrap. Stworzony przez pracowników Twittera na wewnętrzne potrzeby firmy, został udostępniony jako projekt open source i zyskał wielką popularność. Oprócz biblioteki CSS zawiera on także zestaw skryptów w JavaScript, dzięki czemu jest niemal kompletnym narzędziem.

Inne popularne frameworki to Zurb Foundation, Pure CSS czy Semantic UI. Wybór pomiędzy nimi to głównie kwestia preferencji. Każdy z nich ma nieco inną filozofię i założenia, co przekłada się też na skalę i stopień zaawansowania biblioteki.

W tym kursie skupimy się na nauce Bootstrapa ze względu na jego popularność i bogactwo możliwości, które zapewnia.

Kodowanie z gotowców – druga strona medalu

Korzystanie z frameworków czy bibliotek może wydawać się bardzo kuszące, szczególnie na początku przygody z kodowaniem. Dzięki nim wystarczy podstawowa wiedza o HTML i CSS, żeby stworzyć całkiem zaawansowane i profesjonalnie wyglądające strony internetowe.

Problem polega na tym, że zaczynanie przygody z kodowaniem od frameworka powoduje, że uczący się nie zrozumie jego działania "pod spodem". Według niektórych opinii takie osoby są "klepaczami", którzy tylko "składają klocki" z frameworka, ale tak naprawdę nie rozumieją, jak to działa.

Czasem taka osoba przychodzi na rekrutację na frontendowca i okazuje się, że nie potrafi zakodować prostej strony bez pomocy frameworka. To nie świadczy o niej najlepiej. Dlatego w toku nauki zastosowaliśmy taką, a nie inną kolejność modułów.

Do tego nigdy nie jest tak, że wykorzystując np. Bootstrapa w projekcie, korzystamy tylko z jego oryginalnych klas z CSS! Bootstrap jest uniwersalny, ale nie aż tak. Z powodu unikalnych wizualnie elementów w danym projekcie graficznym zawsze trzeba coś w tych klasach CSS dodać lub zmodyfikować albo dopisać swoje własne reguły wyglądu.

Dla kogoś, kto nie ma większej świadomości CSS (poza frameworkiem), może to być bardzo trudne do wykonania. Pamiętaj, że nic nie zastąpi solidnej znajomości technologii webowych i zawsze należy być świadomym, jak działają narzędzia, których używamy. Dlatego też, zanim przeszliśmy do Bootstrapa, napisaliśmy całkiem sporo kodu bez jego pomocy.

Bootstrap, jak już powiedzieliśmy, jest dość rozbudowanym frameworkiem CSS. Duża liczba komponentów idzie w jego przypadku w parze z drobiazgowo określonym wyglądem, przez co możemy powiedzieć, że wraz z Bootstrapem dostajemy również w miarę określony look&feel. Jest on przez sceptyków określany czasami jako "Bootstrap look".

Jednak możemy dzięki niemu szybko zbudować gotowy prototyp strony i jej docelową wersję. Jedyne, co trzeba zrobić, to dodać go do strony. Do tego nic nie stoi na przeszkodzie, aby go modyfikować pod swoje potrzeby.

Wersje Bootstrapa

W tym kursie będziemy używać czwartej wersji Bootstrapa (Bootstrap 4). W przeciwieństwie do poprzedniego wydania wersja czwarta oparta jest na flexboksie. Flexboksa znasz już z poprzedniego modułu, więc zrozumienie podstaw Bootstrapa powinno być dla Ciebie proste! Przy okazji poznawania tego frameworka pogłębisz swoje rozumienie samego flexboksa, więc będzie Ci łatwiej w przyszłości kodować strony także bez użycia "gotowca".

Dokumentacja Bootstrapa

Każdy szanujący się framework ma swoją stronę, na której umieszczona jest jego dokumentacja. Dokumentacja to podstawowe źródło informacji dotyczących zarówno instalacji, jak i użytkowania danego narzędzia.

Dokumentację Bootstrapa znajdziesz pod adresem: Bootstrap Introduction.

Jest ona wykonana w bardzo czytelny sposób, jak przystało na framework, który ma pomagać tworzyć estetyczne i użyteczne szablony HTML/CSS.

Najważniejsze sekcje dokumentacji (menu boczne):

• Getting started – informacje związane głównie z podłączeniem Bootstrapa do naszego projektu.
• Layout – informacje związane z głównymi założeniami frameworka i jego kluczowym elementem, którym jest responsywny grid (za chwilę wyjaśnimy sobie to słowo).
• Content – zbiór stylów odpowiedzialnych za wygląd podstawowych elementów HTML, takich jak nagłówki, obrazki czy tabele.
• Components – biblioteka gotowych komponentów CSS i JavaScript, które możemy wstawić na naszą stronę, np. menu nawigacji, grupy przycisków i inne. Każdy komponent posiada opis kodu potrzebnego do jego zastosowania, a także wyjaśnienie, jak działa i jak go modyfikować.
• Utilities – klasy pomocnicze, dzięki którym jesteśmy w stanie wypozycjonować element czy np. dodać mu marginesy bez pisania własnego CSS.

Z tych sekcji dokumentacji będziesz korzystać najczęściej, tworząc strony na Bootstrapie.

Nie ucz się wszystkiego na pamięć!

Rozmiar dokumentacji Bootstrapa na pierwszy rzut oka może onieśmielać. Nie ma jednak powodu się bać – chyba żaden developer nie zna jej na wyrywki! Nawet doświadczeni programiści korzystają z dokumentacji narzędzi, ponieważ wiedzą, że frameworki przychodzą i odchodzą – już sam Bootstrap 4 jest całkowicie niekompatybilny ze swoją poprzednią wersją! Najważniejsze zatem to zrozumieć ogólne założenia, a do dokumentacji sięgać po konkretne przykłady czy wzorce kodu.

Jak dodać Bootstrapa do strony

Istnieje kilka sposobów dodania Bootstrapa do własnego projektu. Jeden z nich polega na pobraniu zestawu plików ze strony. Następnie musimy rozpakować i umieścić pobrany folder w naszym projekcie, w głównym katalogu, i dodać w pliku HTML odpowiednie linki do plików CSS i JavaScript.

Innym, prostszym rozwiązaniem jest dołączenie pliku Bootstrapa ze źródła zewnętrznego, który jest udostępniany przez tzw. CDN, czyli Content Delivery Network. CDN jest siecią serwerów, na których przechowywane są często używane (m.in. na stronach internetowych) pliki.

W tym podejściu nie trzeba ich ściągać, wystarczy zalinkować odpowiednie źródła. Aktualny link zawsze znajdziesz w dokumentacji Bootstrapa, w sekcji "Getting Started".

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">

Jak zauważysz, plik w powyższym linku ma w nazwie również słowo min. Oznacza to, że link wskazuje na plik zminifikowany, z którego zostało usunięte wszelkie formatowanie (wcięcia, łamanie linii) w celu wydajniejszego wczytywania strony.

Są też inne metody podłączenia Bootstrapa, ale dwie powyższe będą wystarczające na długi czas Twojej przygody z frontendem.

Modyfikacja czy oddzielny CSS?

Niemal w 100% przypadków jest tak, że pomimo zastosowania Bootstrapa, projekt graficzny lub wymagania klienta wymuszają zmianę domyślnego wyglądu elementów na bazie tego frameworka.

Można trzymać plik Bootstrapa u siebie i go modyfikować. Naszym zdaniem lepszą praktyką jest jednak pozostawienie tego pliku bez zmian i nadpisywanie jego stylów za pomocą klas we własnym, osobnym pliku CSS. Tym sposobem nadal używamy frameworka, ale niektóre elementy dostosowujemy pod siebie.

Takie podejście ma jeszcze następujące zalety:

• znając ten framework CSS prawie na pamięć, nie musimy przeglądać, co w nim zmieniono – wystarczy, że w oddzielnym (pewnie mniejszym) pliku CSS, sprawdzamy tylko to, co zmodyfikowano,
• jeśli pojawia się nowa wersja Bootstrapa, można śmiało podmienić framework na nowszą edycję bez obaw o zepsucie wyglądu strony. W przypadku zmodyfikowanego frameworka zastąpienie go nowszą wersją oznacza sporo pracy z ponowną zmianą stylów.

W tym module podłączymy Bootstrapa za pomocą drugiej metody (przez CDN), oraz stworzymy własny plik stylów, nadpisujący domyślne deklaracje Bootstrapa. Z frameworka będziemy korzystać, dodając do elementów HTML określone klasy. Zobaczysz, jak prosto i szybko można zbudować w ten sposób elegancką stronę!

Najpierw jednak trochę teorii, abyśmy wiedzieli, jak w ogóle to wszystko działa. Przejrzymy teraz najważniejsze elementy Bootstrapa, a potem wypróbujemy je w praktyce, kodując projekt.

Grid

Jednym z najważniejszych komponentów, jakie dostajemy z Bootstrapem, jest grid. Dzięki temu nie musimy każdorazowo przepisywać go na nowo. Grid, po polsku siatka, to nic innego, jak układ elementów na stronie w rzędach i kolumnach:

Jak pamiętasz, w poprzednim module ustawialiśmy "pudełka" w projektach poziomo w rzędzie, nadając pewne właściwości CSS na ich wrappera-rodzica oraz na same "pudełka". Tworzyliśmy w ten sposób prosty grid! Bootstrap działa na tej samej zasadzie. Różnica polega na tym, że używając Bootstrapa, nie musimy pisać ani jednej linijki CSS w celu utworzenia grida, po prostu działa on poprzez dodawanie odpowiednich klas.

Spójrz na przykład poniżej i przeanalizuj jego kod HTML. Nie napisaliśmy ani linijki własnego CSS, a mimo to ustawiliśmy kolumny w rzędzie:

To, co musisz koniecznie zapamiętać, to podstawowa struktura grida Bootstrapa. Wszystkie elementy umieszczamy w kontenerze (czasem można go pominąć) – container, a następnie wierszu (obowiązkowo!) - row, tak jak w przykładzie poniżej:

<div class="container">
  <div class="row">
    <div class="col-4">Hello World!</div>
    <div class="col-4">Hello World!</div>
    <div class="col-4">Hello World!</div>
  </div>
</div>

Container reguluje szerokość treści wewnątrz niego. Bootstrap oferuje dwa rodzaje kontenerów: responsywny container o określonej szerokości przy różnych wielkościach ekranu, i container-fluid, który zawsze zajmuje 100% dostępnej szerokości, niezależnie od wielkości ekranu.

W powyższym przykładzie divy wewnątrz row ułożą się w rzędzie. Co oznaczają numerki w ich klasach (np. col-4)? Oznacza ona szerokość danego elementu w stosunku do szerokości elementu-rodzica. Domyślnie grid Bootstrapa dzieli stronę na 12 kolumn:

Każdy z elementów w powyższym przykładzie zajmuje 4 kolumny. Elementy są trzy, czyli ich łączna szerokość to 12 kolumn – cały rząd jest zajęty.

Jak już pewnie się domyślasz, elementy, które chcemy umieścić w jednym rzędzie, muszą mieć łączną szerokość równą lub mniejszą od 12. Mogą to być np. 2 kolumny o szerokości 6 (każda wtedy zajmie połowę szerokości), 4 kolumny o szerokości 3, kolumna 3 i kolumna 9 czy wręcz 12 kolumn o szerokości 1 każda. A co się stanie, jeżeli umieścimy w rzędzie elementy o łącznej szerokości większej niż 12? Nic specjalnego – Bootstrap jest na tyle inteligentny, że po prostu przeniesie "nadmiarowe" kolumny do kolejnego rzędu.

Używając Bootstrapa, możemy również bardzo łatwo modyfikować szerokość elementów, w zależności od rozmiaru ekranu. Dane "pudełko" ma zajmować 100% szerokości na telefonie, połowę szerokości na średnich ekranach, a 1/4 na dużych monitorach? Żaden problem – z pomocą przychodzą nam wtedy klasy responsywne.

Klasy responsywne

Bootstrap oddaje nam do dyspozycji cały system do prostego budowania responsywnych stron. Polega on na dodawaniu klas z odpowiednimi prefiksami do elementów HTML, aby sterować ich szerokością, co prezentuje poniższa tabela (kliknij obrazek, aby go powiększyć):

Zauważ, że Bootstrap jest mobile first, czyli breakpointy (szerokości ekranu, przy których zmienia się layout – wytłuszczone w powyższej tabeli) idą "do góry". Oznacza to, że chcąc nadać jakiś styl na szerokość small i medium nie musimy stosować dwóch klas, jednej z prefiksem -sm-, a drugiej z -md-. Wystarczy klasa -sm-, która obejmie wszystkie szerokości ekranu powyżej 576px, a więc także i medium.

Przykład: jeżeli chcemy utworzyć element, który na bardzo małych (extra small) i małych (small) ekranach będzie miał szerokość 6, na medium i large szerokość 4, a na extra large szerokość 2, nadamy mu następujące klasy:

<div class="col-6 col-md-4 col-xl-2">Lorem ipsum</div>

Zasada DRY, jak widzisz, stosowana jest również i tutaj. :)

Aby ułatwić sobie zrozumienie idei klas responsywnych, zerknij na poniższego CodePena. Otwórz go w pełnej wersji w nowym oknie i zmieniaj szerokość przeglądarki, by zobaczyć zmiany. Przyjrzyj się strukturze HTML, aby zrozumieć zależność między klasami elementów a ich zachowaniem na różnych szerokościach. Zwróć przy okazji uwagę, co powodują dodatkowe klasy nadawane na element row:

Możliwości jest oczywiście więcej, a znajdziesz je w dokumentacji.

Klasy pomocnicze

Klasy pomocnicze Bootstrapa umożliwiają podstawowe stylowanie elementów bez konieczności pisania CSS. Nie ucz się ich na pamięć – całkiem możliwe, że w kolejnej edycji Bootstrapa będą wyglądać zupełnie inaczej! Wystarczy, że zrozumiesz, jak działają, a konkretne przykłady weźmiesz z dokumentacji.

Margin i padding

Obie właściwości używają wzoru {właściwość}{strona}-{rozmiar}, gdzie:

• właściwość to m dla margin, p dla padding
• strona to:
  • t dla klas, które nadają margin-top lub padding-top
  • b dla klas, które nadają margin-bottom lub padding-bottom
  • l dla klas, które nadają margin-left lub padding-left
  • r dla klas, które nadają margin-right lub padding-right
  • x dla klas, które nadają właściwość *-left i *-right (czyli osi X – poziomej)
  • y dla klas, które nadają właściwość *-top i *-bottom (czyli osi Y – pionowej)
  • bez określonej strony (blank) – dla klas, które nadają margin lub padding ze wszystkich stron elementu
• rozmiar to pewna nadawana odgórnie przez Bootstrapa wielkość, domyślnie dostępne są wartości od 0 do 5 oraz auto.

Jak poskładać to w całość? Spójrzmy na przykłady:

• aby element miał zerowy margin ze wszystkich stron, nadamy mu klasę m-0,
• aby element miał górny i dolny padding wielkości 3, nadamy mu klasę py-3,
• aby element miał górny margin wielkości 5, nadamy mu klasę mt-5.

I tak dalej.

Klas pomocniczych, służących do przeróżnych celów (np. do zmiany listy <ul> z blokowej na liniową), jest oczywiście dużo więcej – wszystkie znajdziesz w dokumentacji.

Przykładowe elementy

Jak wspomnieliśmy, Bootstrap oferuje mnóstwo możliwości, więc nie będziemy tutaj przedstawiać wszystkich. Konkretne, potrzebne nam komponenty będziemy wyszukiwać w dokumentacji. Spójrz jednak na poniższy CodePen i przeanalizuj jego HTML, aby oswoić się z klasami Bootstrapa i domyślnym wyglądem elementów.

Jak w każdym module, przećwiczysz poznane zagadnienia w praktyce, pracując na realnym przykładzie.

Wyobraź sobie, że otrzymujesz zlecenie zaprojektowania i zakodowania prostego sklepu internetowego. Aby móc szybko pokazać klientowi swoją propozycję, decydujesz się na stworzenie interaktywnej makiety za pomocą Bootstrapa. W docelowej wersji projektu napiszesz oczywiście elegancki CSS, ale w tym przypadku chodzi nam tylko o szkicową demonstrację.

Nie oznacza to jednak, że taki szkic ma wyglądać byle jak! Z pomocą przychodzą nam style Bootstrapa, dzięki którym możemy szybko stworzyć profesjonalnie wyglądającą makietę.

Spójrz na obrazek poniżej:

Link do pełnej wersji

Link do wersji mobilnej

Aby osiągnąć taki efekt – zarówno w wersji desktop, jak i mobilnej – potrzebowaliśmy około 50 linii CSS (licząc bez odstępów), i to tylko do ostylowania czcionek i lekkiego dostosowania niektórych elementów. Wszystko inne załatwił za nas Bootstrap.

Do zaliczenia zadania konieczne będzie napisanie poprawnej struktury Bootstrapa (i kilku właściwości CSS zaznaczonych w instrukcji), a własne stylowanie będzie miłym dodatkiem, którym zajmiesz się, jeżeli wystarczy Ci czasu.

Tak jak poprzednio, możesz kodować projekt zgodnie z podglądem powyżej (kliknij, aby pobrać zdjęcia użyte w designie), lub użyć własnej wyobraźni. Twój sklep może "sprzedawać" dowolne produkty – ubrania, książki, elektronikę... Możesz też dobrać własne kolory, czcionki i treści.

Analiza projektu graficznego

Nasz projekt składa się z kilku charakterystycznych sekcji. Do niektórych użyjemy gotowych komponentów Bootstrapa:

• górny pasek z menu – komponent Navbar
• animowany slider (karuzela) – komponent Carousel
• boczna lista "Brands" – komponent List group
• kafelki z produktami – komponent Card
• kafelki ze zdjęciami w tle – komponent Card
• trzy "pudełka" w rzędzie – komponent Card

Trzy "pudełka" w sekcji nad stopką oraz samą stopkę zakodujemy, używając jedynie samego grida Bootstrapa.

Projekt będziemy kodować równolegle w wersji desktop i mobile, by pokazać Ci od razu, jak bootstrapowe klasy wpływają na wyświetlanie elementów na różnych szerokościach ekranu.

Przygotowanie projektu i stylów bazowych

Tak jak w poprzednich modułach, zjedź do zadania w submodule 5 ("Wyślij projekt do Mentora") i naciśnij w nim guzik, aby przejść do edytora. Dodaj do projektu plik style.scss. W pliku HTML umieść znaną Ci już strukturę bazową wraz z tagiem meta viewport i podepnij Font Awesome.

Następnie, przed linkiem do swojego arkusza stylów, podepnij Bootstrapa:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">

A na końcu, tuż przed tagiem </body>, dodaj:

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/js/bootstrap.min.js" integrity="sha384-XEerZL0cuoUbHE4nZReLT7nx9gQrQreJekYhJD9WNWhH8nEW+0c5qq7aIo2Wl30J" crossorigin="anonymous"></script>

Są to skrypty niezbędne do tego, by dynamiczne elementy naszej strony funkcjonowały prawidłowo. Na razie nie musisz się szczególnie przejmować tym, jak konkretnie działają skrypty – będziesz się o tym uczyć już niedługo w modułach poświęconych JavaScriptowi.

W poniższych instrukcjach na początku będziemy dość szczegółowo omawiać poszczególne komponenty, ale z czasem coraz więcej rzeczy będziesz robić samodzielnie. Jeżeli uznasz, że nie potrzebujesz pomocy, spróbuj zakodować daną sekcję czy wręcz cały projekt bez zaglądania do instrukcji – dopiero później sprawdź swoje rozwiązanie z tym podanym w treści modułu.

Navbar

Pierwszym elementem w naszym projekcie jest pasek nawigacji, zwany w terminologii Bootstrapa Navbar. Nasz navbar posiada wielopoziomowe menu (dropdown), a na mniejszych rozdzielczościach pojawia się ikona "hamburgera", która rozwija ukrytą nawigację.

Wersja desktop:

Wersja mobile:

1. W pliku HTML utwórz tag <nav> z klasą navbar. Jest to podstawowa klasa, której będziemy potrzebować do stworzenia nawigacji.

2. Oprócz tego musimy zdecydować, na jakiej szerokości ekranu nawigacja będzie widoczna w całości. Dodaj do taga <nav> klasę navbar-expand-md, by działo się to na ekranach o minimalnej szerokości 768px.

3. Następnie sprawimy, że navbar nie będzie przesuwał się przy scrollowaniu strony, czyli że będzie fixed. Czy potrafisz znaleźć odpowiednią klasę w dokumentacji tego komponentu?

4. Na końcu wybierzmy jedną z domyślnych kompozycji kolorystycznych dla naszego navbara, dodając klasy navbar-light bg-light lub navbar-dark bg-dark.

Zapisz i odśwież podgląd, a następnie zbadaj Inspektorem, jakie właściwości CSS dodała do naszego elementu HTML klasa navbar. Sprawdzaj w ten sposób każdą bootstrapową klasę, którą utworzysz, aby zorientować się, co się dzieje "pod maską" tego frameworka, oraz aby być w stanie powtórzyć dany efekt w swoim kodzie już bez użycia Bootstrapa.

Szkielet navbara gotowy, dodamy teraz do niego treść.

1. Wewnątrz navbara dodaj tag <a> z klasąnavbar-brand i wpisz w nim nazwę swojego sklepu.

2. Pod tagiem <a> umieścimy od razu przycisk "hamburgera", który będzie rozwijał nawigację. Ma on następującą postać:

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mobile-menu" aria-controls="mobile-menu" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

Jak widzisz, jest to po prostu tag <button> z licznymi atrybutami (zbadaj go Inspektorem, aby dowiedzieć się więcej o tym, jak jest ostylowany). Spośród tych atrybutów najważniejszy dla nas na ten moment to data-target – wskazuje on, który element będzie pokazywany i ukrywany poprzez kliknięcie buttona na urządzeniach mobilnych. Ponieważ chcemy, by button pokazywał i ukrywał elementy zaznaczone na obrazku poniżej:

musimy je wszystkie owinąć w <div> o id takim samym jak wartość atrybutu data-target naszego buttona. W ten sposób bootstrapowy skrypt "połączy" sobie oba elementy i będzie wiedział, że jeden z nich ma mieć wpływ na drugi. Warto zapamiętać, że tak działają skrypty – przyda Ci się to już niedługo, gdy zaczniesz się uczyć JavaScriptu!

3. Na razie skupmy się jednak na HTML i pod buttonem umieśćmy <div> o klasach collapse navbar-collapse i o id mobile-menu (czyli takim samym, jak atrybut data-target buttona, ale bez znaku #). Wstaw w tym divie dowolną przykładową treść i odśwież podgląd, aby sprawdzić, czy rozwijanie nawigacji działa jak należy.

4. Jeżeli rozwijanie działa, możemy usunąć przykładową treść i wstawić nasz docelowy content: rozwijane menu i przyciski po prawej stronie. Zacznijmy od tego pierwszego. Wewnątrz stworzonego przed chwilą diva umieść tag <ul> z klasą navbar-nav, a pod nim kilka tagów <li>. Wewnątrz każdego <li> umieść tag <a> z klasą nav-link, atrybutem href równym # i z dowolną treścią. To będzie nasze menu pierwszego poziomu.

5. Dodamy teraz menu drugiego poziomu do jednego z linków. W Bootstrapie działa to nieco inaczej, niż w metodzie, którą już znasz, ale nie ma się czego bać. Do jednego z tagów <a> w menu pierwszego poziomu dodaj klasę dropdown-toggle i atrybut data-toggle="dropdown". Do jego rodzica, czyli taga <li>, dodaj klasę dropdown. Jest to minimum wymagane do tego, by link stał się rodzicem nawigacji drugiego poziomu.

6. Następnie pod tym tagiem <a> wstaw tag <div> z klasą dropdown-menu. Wewnątrz niego wstaw jeden pod drugim kilka tagów <a> z klasą dropdown-item, atrybutem href równym # i z dowolną treścią. I to wszystko. Przetestuj rozwijane menu i sprawdź, czy działa!

7. Na końcu dodajmy do nawigacji dwa przyciski z prawej strony. Ponieważ chcemy, by na mobile również były one ukryte, musimy umieścić je wewnątrz diva collapse navbar-collapse. Zerknij do dokumentacji komponentu Button group. Chcemy użyć podstawowej wersji przycisków ("Basic example") - skopiuj podany kod, wklej w swoim edytorze i zmodyfikuj go tak, aby mieć dwa, a nie trzy przyciski i aby ich rodzic miał dodatkowo klasę ml-auto. Następnie spraw, aby na każdym buttonie, obok jego treści (w projekcie są to "Cart" i "Account") wyświetlała się pasująca ikona z Font Awesome (w designie są to odpowiednio ikony card i user). Opcjonalnie możesz zmienić kolor buttonów, zmieniając im klasę btn-secondary na inną z podanych w Buttons – Examples.

8. Obejrzyj swoje dzieło dokładnie na różnych szerokościach ekranów i upewnij się, że wszędzie działa jak trzeba.

Nawigacja gotowa!

Carousel

Popularna karuzela to sposób przedstawiania treści i/lub grafiki za pomocą przewijających się slajdów. Spójrz na najprostszy przykład:

Przeanalizuj strukturę HTML i zwróć uwagę, w jaki sposób zagnieżdżone są elementy. Zbadaj całość Inspektorem i sprawdź, jakie style nadają poszczególne klasy.

W projekcie mamy podobną karuzelę, z tym że w tle każdego slajdu znajduje się zdjęcie. Do tego elementu będziemy musieli dopisać kawałek własnego CSS, aby fotografie zawsze zajmowały całą powierzchnię slajdu, a wszystkie slajdy były tej samej wysokości. Najpierw spójrz jednak na przykład:

Zauważ, że id głównego wrappera karuzeli (main-slider) jest takie samo, jak atrybuty href strzałek służących do przewijania. Ponownie, skrypt musi "wiedzieć", że te elementy są w jakiś sposób połączone, więc rozpoznaje je po tym atrybucie. Możesz zmienić atrybut na własny (w obu strzałkach i wrapperze karuzeli) i zobaczyć, że skrypt będzie nadal działać.

Dodajmy zatem karuzelę do naszej strony!

1. Wstaw karuzelę ze zdjęciami (taką, jak w drugim CodePenie powyżej) do pliku HTML i podmień fotografie (możesz znów posłużyć się serwisem Pexels, lub wykorzystać zdjęcia z paczki, którą zamieściliśmy w poprzednim submodule, uprzednio wrzucając je na serwer typu PostImages).

2. W divie carousel-caption każdego slajdu dodaj tagi <h4> i <h3> z dowolnymi treściami oraz tag <a> z klasami btn btn-primary i atrybutem href równym #, również z wybraną przez siebie treścią. Odśwież podgląd i zobacz, co się stanie. Przy okazji zbadaj Inspektorem, co robi bootstrapowa klasa w-100.

3. Nasza karuzela wygląda w miarę dobrze, ale jeżeli fotografie mają różne proporcje, to slajdy nie będą równej wysokości. Poprawmy to! W swoim pliku .scss stwórz jeden selektor dla dwóch klas: .carousel-inner i .carousel-item. Nadaj im wysokość 100vh.

4. Następnie utwórz selektor dla tagów <img> znajdujących się wewnątrz elementu o klasie carousel-item i nadaj im wysokość 100% oraz naszą ulubioną właściwość object-fit: cover;. Od razu lepiej!

5. Karuzela nie wygląda jeszcze jak w designie – np. napisy nie są wycentrowane w pionie na slajdzie. Tym, jak i resztą stylowania, zajmiemy się na samym końcu. Najpierw dokończmy resztę strony.

Uwaga: jeżeli pobierasz fotografie do tego komponentu z internetu, zwróć uwagę na ich rozmiar. Wielkoformatowe zdjęcia są piękne, ale nieskompresowane potrafią ważyć nawet kilka megabajtów! Dbaj o szybkość ładowania swojej strony — zawsze kompresuj zdjęcia w programie graficznym lub za pomocą narzędzi typu Tiny JPG.

Sekcja: dwie kolumny

Kolejna sekcja będzie dla Ciebie ćwiczeniem funkcjonalności, która jest sercem Bootstrapa – sprawdzimy, jak działa bootstrapowy grid!

Na samym początku będziemy potrzebować dwóch kolumn: w jednej umieścimy listę marek, a w drugiej kafelki z produktami:

1. Stwórz pod karuzelą sekcję o dowolnej klasie, na przykład products. Dodaj jej przy okazji klasę odpowiedzialną za pionowy padding o wartości 5 (jeżeli jej nie pamiętasz, zerknij do dokumentacji lub sekcji "Klasy pomocnicze" w tym module).

2. Wewnątrz stwórzmy dwa podstawowe wrappery Bootstrapa, czyli container, a w nim row.

3. W divie z klasą row stwórz dwa kolejne divy, jeden pod drugim. Chcemy, żeby na dużych ekranach (lg) pierwszy z nich zajmował trzy kolumny, a drugi 9 kolumn. Każdy z tych divów powinien zatem dostać po jednej klasie – czy wiesz, jakie to będą klasy?

Zbadaj każdą z nowo utworzonych klas Inspektorem i zobacz, jakie style nadają.

Pierwsza kolumna

Kolumny są już gotowe – zajmijmy się treścią pierwszej z nich, czyli listą marek.

1. Na samym początku umieść w niej nagłówek <h2> z tytułem.

2. Do stworzenia listy marek użyjemy komponentu List group. Stwórz tag <div> z klasą list-group. Wewnątrz tego diva umieść kilka tagów <a>, każdy z klasami list-group-item oraz list-group-item-action. Zbadaj całość Inspektorem – jak widzisz, klasa list-group, mówiąc ogólnie, zamienia element w container flexboksowy, w którym elementy potomne ułożone są w kolumnie (flex-direction: column).

3. Obejrzyj stworzoną listę na różnych szerokościach ekranu. Układ kolumnowy wygląda dobrze na rozdzielczościach xs i lg, ale na ekranach sm i md ułóżmy elementy listy w rzędzie. Odpowiednie klasy pomocnicze na pewno znajdziemy w dokumentacji – wejdź więc w sekcję Utilities > Flex i spójrz na sekcję Directions. Z podanej tam listy wybierz dwie klasy: jedną, która ustawi elementy w rzędzie (row) na szerokości sm, i drugą, która wypozycjonuje je w kolumnie na szerokości md. Nadaj te klasy na div z klasą list-group.

Druga kolumna

W drugiej kolumnie ("New Arrivals") chcemy wyświetlać:

• na najmniejszych ekranach – cztery karty z produktami jedna pod drugą, na 100% szerokości,
• na szerokości smi powyżej – cztery karty po dwie w rzędzie,
• na szerokości lg i powyżej – trzy karty w rzędzie.

Jak już wiesz, aby umieścić w Bootstrapie elementy w rzędzie obok siebie, należy owinąć je w div z klasą row. Czy możemy zatem wstawiać row wewnątrz col? Odpowiedź brzmi: jak najbardziej. Ważne jest jedynie, by nie umieszczać containera w innym containerze.

Nasza struktura będzie zatem wyglądała jak na obrazku poniżej (czerwone ramki to kolumny, a niebieska to row):

Plan działania:

1. Wewnątrz drugiej kolumny umieść nagłówek <h2> z tytułem.

2. Pod nagłówkiem stwórz tag <div> z klasą row. W nim znajdą się kolumny z kafelkami.

3. Wewnątrz row stwórz cztery elementy <div> – będą to wrappery dla naszych kafelków. Dlaczego cztery, choć na obrazku powyżej widać trzy? Obrazek przedstawia wersję lg, gdzie jedna kolumna będzie ukryta.

4. Spójrz jeszcze raz na założenia powyżej. Na ekranach sm wrappery mają zajmować 50% szerokości, czyli 6 kolumn. Każdemu z czterech divów nadaj zatem odpowiednią klasę. Podobnie każdemu dodaj klasę odpowiedzialną za to, by div zajmował 3 kolumny na szerokości lg.

5. Sprawimy teraz, aby jeden z divów znikał na szerokości lg i powyżej. Zajrzyj do dokumentacji, do rozdziału Utilities > Display, do sekcji "Hiding elements". Wybierz z tabeli odpowiednie klasy i nadaj je na jeden z divów.

6. Wstaw w divach jakąś przykładową treść i upewnij się, że na wszystkich szerokościach divy działają zgodnie z założeniami.

7. Jeżeli wszystko jest w porządku, czas wypełnić divy docelową treścią. W projekcie w każdym z nich jest kartą składającą się ze zdjęcia, tytułu i buttona:

Stworzymy je za pomocą komponentu Card.

8. W każdym utworzonym przed chwilą divie wstaw kolejny <div> z klasą card. Wewnątrz będziemy potrzebować kolejnych dwóch divów-wrapperów, jednego pod drugim: card-image, w którego środku wstawisz obrazek (<img>), oraz card-body, gdzie umieścisz nagłówek stopnia piątego z tytułem, a pod nim znacznik <a> z klasami btn i btn-light.

9. Na końcu dodajmy nieco CSS, aby obrazki w kartach miały prawidłowy rozmiar: utwórz selektor wybierający wszystkie tagi <img> wewnątrz elementu card i nadaj im width: 100%;, height: 300px; oraz – tak, tak – object-fit: cover;.

Uwaga: pamiętaj, aby w tego typu małych komponentach umieszczać odpowiednio przeskalowane obrazki. Fotografie o dużej rozdzielczości sprawią, że strona będzie niepotrzebnie długo się ładować, co może zniechęcić użytkownika.

Zrobione!

Sekcja: trzy kafelki w dwóch rzędach

Na pierwszy rzut oka ta sekcja wygląda na całkowicie nowy element, ale przekonasz się, że bazuje ona na tych samych komponentach, które już znasz.

Jak zwykle zatem utwórz sekcję (z pionowym paddingiem 5), container i row.

Będziemy potrzebować trzech kolumn:

• dwie pierwsze niech zajmują po 6 kolumn na szerokości md i powyżej;
• trzecia niech zawsze zajmuje 100% szerokości, niezależnie od wielkości ekranu.

1. W każdej kolumnie wstaw element z klasą card oraz dolnym marginesem 3, w nim bezpośrednio obrazek (<img>) a pod obrazkiem <div> z klasą card-body, zawierający tytuł i button, podobnie jak w poprzedniej sekcji.

2. Odśwież podgląd i porównaj go z designem. Co teraz musisz zrobić? Na pewno chcemy, by opis karty nie znajdował się pod obrazkiem, tylko na nim. Jak możemy to osiągnąć? Z pomocą przyjdzie nam pozycja absolute, która sprawi, że będziemy mogli swobodnie przemieszczać <div> z opisem wewnątrz jego rodzica. Do nadania tej pozycji znów użyjemy klasy Bootstrapa. W sekcji Utilities > Position w dokumentacji wyszukaj odpowiednią klasę i dodaj ją do wszystkich divów card-body w tej sekcji.

3. Prawie dobrze! Teraz jeszcze tylko wycentrujemy opis wraz z buttonem. Zbadaj Inspektorem jedną z kart. Klasa card domyślnie nadaje elementowi display: flex – fantastycznie! To oznacza, że możemy łatwo wycentrować elementy wewnątrz niego w obu osiach. W dokumentacji, w rozdziale Utilities > Flex, w rozdziale "Justify content" odszukaj klasę odpowiedzialną za centrowanie poziome, a w sekcji "Align items" - taką odpowiedzialną za centrowanie pionowe. Dodaj obie klasy do elementów card w bieżącej sekcji w HTML.

Sekcja: karty z dwiema kolumnami

W tej sekcji ponownie użyjemy kart – to jeden z najbardziej wszechstronnych elementów Bootstrapa! Tym razem jednak podzielimy je wewnątrz na kolumny — w pierwszej znajdzie się ikona, w drugiej treść:

1. W tej sekcji będą trzy elementy: chcemy, aby każdy z nich zajmował 4 kolumny na ekranach md i większych, a 100% szerokości na mniejszych wyświetlaczach. Utwórz potrzebną strukturę i nadaj divom odpowiednią klasę.

2. W środku każdego diva utwórz element z klasą card. W nim umieścisz kolejny rząd elementów. Jak pamiętasz, aby wstawić kolejne kolumny wewnątrz innej kolumny, musimy także owinąć je w row. Pierwszy element ma mieć 2 kolumny szerokości na ekranach powyżej md, a drugi 10 kolumn (również na md i wyżej). Co więcej, pierwszy div ma znikać poniżej szerokości md. Wyszukaj w dokumentacji Bootstrapa odpowiednie klasy i użyj ich w swoim kodzie.

3. Wewnątrz dwukolumnowych divów umieść ikony z Font Awesome (w projekcie są to truck, money-bill-wave i life-ring). W dziesięciokolumnowych divach utwórz divy z klasą card-body, w których umieść nagłówki trzeciego stopnia i akapity z dowolną treścią.

4. Na samym końcu, aby nadać nieco oddechu elementom w tej sekcji, nadaj na karty padding o wartości 3 i dolny margines o wartości 3, a na ikony (<i>) - górny padding o wartości 4 oraz lewy padding o wartości 3.

Sekcja: trzy kolumny zmieniające kolejność

Wizualnie ta sekcja jest bardzo prosta, więc zakoduj ją samodzielnie.

Pamiętaj o poprawnej strukturze Bootstrapa. Całej sekcji nadaj padding za pomocą klasy Bootstrapa, a w swoim pliku .scss zmień jej tło (w projekcie jest to #eff2f5). W kolumnach możesz znów użyć komponentu Card, ale pamiętaj, że karty mają swoje domyślne style, które trzeba będzie nadpisać w stylach. Alternatywnie, możesz użyć zwykłych divów z nie-bootstrapową klasą (np. box). Nadaj im boczny padding 5 i dolny margines 3.

Formularz newslettera to komponent Form z jednym inputem. Zajrzyj do dokumentacji, by dowiedzieć się, jak go zbudować.

Listę z linkami do social mediów utwórz zgodnie ze znanymi Ci z poprzedniego modułu dobrymi praktykami. W projekcie wielkość fonta ikon to 16px.

Kiedy skończysz budowanie tej sekcji, poczytaj w dokumentacji Bootstrapa o flexboksowej właściwości Order i spraw, aby na ekranach md i wyżej sekcje miały kolejność taką, jak na obrazku powyżej, a na mniejszych ekranach taką:

Wskazówka: może być Ci łatwiej zbudować w HTML najpierw wersję mobilną, a potem za pomocą order poustawiać odpowiednio elementy na większych ekranach. W końcu Bootstrap jest mobile first!

Sekcja: stopka

Z tą sekcją również poradzisz sobie śpiewająco samodzielnie!

Nadaj jej pionowy padding 3 i podziel na dwie kolumny (szerokości 4 i 6 na md i wyżej). W dokumentacji znajdź klasę odpowiedzialną za to, by elementy potomne były rozłożone równomiernie na całej szerokości rodzica i nadaj ją na row. Poziomą listę po prawej stronie utwórz za pomocą <ul> z klasami Bootstrapa, wyszukanymi w rozdziale o typografii.

Ostatnie poprawki

Przyjrzyj się swojemu projektowi na szerokościach desktopowych, tabletowych i mobilnych (za pomocą znanej Ci już strony http://responsiv.eu/) i zastanów się, czy wygląda dobrze na każdym urządzeniu. Jeżeli coś jest nie tak, spróbuj przy pomocy Inspektora rozgryźć, gdzie tkwi błąd i go naprawić.

Dla chętnych: stylowanie

Jeżeli masz już poprawną, działającą strukturę strony i zostało Ci jeszcze trochę czasu, możesz uwolnić swoją kreatywność i nadać stronie indywidualny charakter! Podepnij czcionki z Google Fonts, wybierz kolor przewodni, badaj Inspektorem poszczególne elementy, aby wiedzieć, jakie właściwości zmodyfikować... Możesz też przestudiować rozdziały Typography, Buttons z dokumentacji Bootstrapa, aby znaleźć tam kilka ciekawych klas pomocnych przy stylowaniu tekstów na stronie.

Wróć też do karuzeli i spraw, by teksty na slajdach były wyśrodkowane w pionie. Zbadaj Inspektorem pojedynczy slajd – jak widzisz, element carousel-caption ma domyślnie pozycję absolute, a jego bezpośredni rodzic, czyli carousel-item, ma pozycję relative. To już nieźle – znaczy to, że będziemy mogli łatwo wypozycjonować caption względem rodzica. Czy pamiętasz sztuczkę z poprzednich modułów, polegającą na nadaniu elementowi wypozycjonowanemu absolutnie właściwości left: 50%;, top: 50%; oraz transform: translate(-50%, -50%)? Dokładnie to zrobimy w tym przypadku. Przyjrzyj się właściwościom nadawanym przez klasę carousel-caption i zastanów się, które z nich musisz zmodyfikować we własnym pliku .scss. Utwórz w tym pliku selektor dla klasy carousel-caption. Właściwości right i bottom ustaw na auto, zlikwiduj górny i dolny padding oraz dodaj odpowiednie wartości left i top oraz transformację.

Mamy nadzieję, że praca z Bootstrapem była przyjemnością! Nie przyzwyczajaj się jednak za bardzo do tej wygody – ćwicz przede wszystkim umiejętność kodowania stron bez użycia frameworków. Zakładamy, że po tym module lepiej rozumiesz działanie flexboksa i potrafisz go zastosować w pisanym od podstaw projekcie. Jeżeli czujesz, że masz braki w tej kwestii, poćwicz samodzielnie (np. używając edytora CodePen) tworzenie różnych rodzajów layoutów i zmiany kolejności elementów. Niezastąpioną pomocą będzie znany Ci już A Complete Guide to Flexbox.

Poniżej znajdziesz ciekawe linki, które poszerzą Twoją wiedzę.

Flexbox

• Flexbox Froggy – zabawna gra, gdzie poruszasz bohaterem wykorzystując deklaracje flexboksa
• Flexbox Defense – gra, gdzie dowodzisz obroną, ustawiając działa za pomocą flexboksa!
• Flexbox Tester – interaktywne wyjaśnienie działania właściwości flex (flex-grow, flex-shrink, flex-basis)

Bootstrap

• Bootsnipp – kolekcja elementów napisanych z wykorzystaniem Bootstrapa
• Bootstrap 4 Tutorial – interaktywne przykłady komponentów Bootstrapa

Osiągniecie wysokiej jakości kodu czy poczucia estetyki przy tworzeniu stron internetowych wymaga ciągłej praktyki. Właśnie dlatego dajemy Ci możliwość wykonania dodatkowego, samodzielnego projektu.

Ten projekt jest nieobowiązkowy. Jeżeli nie chcesz podjąć się próby samodzielnego działania, to po prostu zaznacz ten submoduł jako wykonany i nie będzie miał on żadnego wpływu na przebieg Twojego szkolenia. Jednak gorąco zachęcamy do podjęcia się tego wyzwania, aby zdobyć jak najwięcej doświadczenia już w trakcie kursu.

Tylko dla ambitnych

Gdy już zostaniesz developerem, nadal będziesz spotykać się z różnego rodzaju projektami, które mogą być dla Ciebie problematyczne. Na przykład, czy wiesz, że czasem klienci dostarczają developerom pliki projektów bez niezbędnych zdjęć/obrazków...? Co wtedy słyszy biedny koder? Proszę wstawić jakieś przykładowe zdjęcia z internetu, potem sobie podmienimy... I jakoś trzeba sobie radzić. :)

Ten projekt jest do samodzielnego wykonania. Można się przy nim posiłkować jedynie wsparciem społeczności, którą zebraliśmy na czacie. Może się zdarzyć, że akurat Mentor pomoże ci rozwiązać jakiś konkretny problem, jednak co do zasady, w przypadku dodatkowego projektu Mentorzy nie mają takiego obowiązku.

Im więcej praktyki i samodzielnego kodowania, tym lepiej. Dodatkową korzyścią jest możliwość pochwalenia się nimi w ramach portfolio.

Uwaga: kodując ten projekt, nie podłączaj Bootstrapa. Ćwicz czysty flexbox oraz elegancki HTML i CSS!

Jak się do tego zabrać?

Utwórz nowy projekt na potrzeby tego zadania. Masz dwie opcje zakodowania szablonu. Możesz skorzystać z przygotowanej przez nas grafiki i dobrze znanych Ci narzędzi albo użyć programu graficznego – Photoshop lub Avocode.

Opcja 1

Poniżej znajdziesz link do grafiki do pobrania w formacie .png:

Link do grafiki

Opcja 2

Jeśli posiadasz Avocode lub Photoshop, udostępniamy także plik .psd:

Link do pliku PSD

Nie znasz ani Photoshopa, ani Avocode? Nie ma problemu! Przygotowaliśmy specjalnie dla Ciebie poradniki, jak zakodować szablon, używając któregoś z wyżej wymienionych programów.

Poradnik Avocode

Poradnik Photoshop

Twoim zadaniem jest:

1. Utworzenie nowego projektu.
2. Zakodowanie layoutu na podstawie grafiki.
3. Uzupełnienie treści, mogą być sztuczne (wypełniacze).
4. Zachowanie dobrych praktyk przedstawionych w dotychczasowych treściach.

Jeżeli nie masz czasu, to pamiętaj, że zawsze możesz później wrócić do projektu i go udoskonalać lub dokończyć wraz ze zdobywaniem wiedzy. Na razie skup się na dobrych praktykach, aby weszły Ci w krew.

Powodzenia!

Po przejściu trzech modułów niniejszego kursu masz już na koncie zakodowanych kilka templatek. Całkiem prawdopodobne, że już niedługo całkowicie samodzielnie będziesz budować strony – czy to na własne potrzeby, czy na zlecenie. Z tego powodu warto uporządkować swoje informacje na temat tworzenia layoutów. Co do zasady, frontendowiec nie jest projektantem, lecz pewna fundamentalna wiedza z zakresu projektowania graficznego jest przydatna, jeśli nie niezbędna. Dzięki niej możemy lepiej porozumieć się z grafikiem, a także samemu rozpoznać dobre (lub niekoniecznie dobre) rozwiązania i wykorzystać tę wiedzę do sprawniejszego budowania strony.

Poniżej znajduje się lista dobrych praktyk związanych z tworzeniem layoutu strony od podstaw.

KISS - Keep it simple, stupid!

Jedną z najważniejszych zasad, które powinniśmy sobie przyswoić, jest dążenie do prostoty. Skomplikowany interfejs jest trudny w użytkowaniu i zniechęca użytkowników (i klientów!) do korzystania z naszej strony. Ponadto prostszy HTML i CSS powoduje, że strona wczytuje się w przeglądarce szybciej, nie skazując użytkowników na czekanie.

Korzystaj ze znanych wzorców.

Tworząc stronę od zera, frontendowcy wielokrotnie napotykają te same trudności dotyczące rozmieszczenia treści na stronie oraz ich wyglądu. Z racji tego, że nie są to nowe problemy, istnieją dla nich pewne sprawdzone rozwiązania, czyli tzw. wzorce (patterns). Takim wzorcem może być np. umieszczenie treści w trzech kolumnach, które na urządzeniach mobilnych wyświetlają się jedna pod drugą, czy też klikalne logo, które prowadzi do strony głównej. To, że znajdują się one na wielu stronach, wynika z tego, że przetrwały one próbę czasu. Możemy założyć, że jeżeli coś sprawdza się na stronie z milionami użytkowników, sprawdzi się też na mniejszą skalę.

Ustal wizualną hierarchię.

Istotną sprawą jest to, aby uwaga użytkownika była skupiona na tym, co jest najważniejsze. W kontekście layoutu ma to znaczenie zwłaszcza przez ustalenie kolejności i rozmiarów poszczególnych treści, ich rozmiarów, kolorów, odstępów pomiędzy elementami.

Nie każ użytkownikom myśleć.

Jest to założenie podobne do pierwszego, jednak nie do końca. Twój layout powinien być zrozumiały dla użytkownika, czyli funkcja poszczególnych jego elementów powinna być jasna od momentu ich ujrzenia. Ponadto użytkownik powinien być w stanie znaleźć bez problemu potrzebne mu funkcje i treści.

Zadbaj o czytelność tekstu.

Twój tekst powinien mieć dostatecznie duży rozmiar, zapewniający czytelność na każdym ekranie. Ponadto interlinie oraz odstępy między literami powinny być dostatecznie duże, by tekst oraz litery nie najeżdżały na siebie.

Spraw, by Twój tekst oddychał! Nie żałuj odstępów i marginesów, by zapewnić każdemu elementowi odpowiednią przestrzeń. Pamiętaj też o odpowiednim kontraście pomiędzy tłem a tekstem. Projektując stronę, trzeba pamiętać o starszych użytkownikach ze słabszym wzrokiem. Słabszy kontrast ogranicza czytelność tekstu przy wyświetlaniu na mniejszych ekranach. Także wtedy, gdy na wyświetlacz świeci słońce lub gdy tekst wyświetlany jest na starszym monitorze.